import React, {useRef,useState} from 'react';
import {Link,useNavigate } from "react-router-dom";
import {message} from "antd";
import './css/main.css'
import './css/util.css'
import './fonts/font-awesome-4.7.0/css/font-awesome.min.css'
import img from './images/img-01.png';
import {login} from "../../api/login";
import {register} from "../../api/register";

function Login(props) {
    const usernameRef = useRef('')
    const passwordRef = useRef('')
    const rePasswordRef = useRef('')
    const [isLogin,setLoginFlag] = useState(true)
    const navigate = useNavigate()
    const loginSubmit = async () => {
        const {value: username} = usernameRef.current
        const {value: password} = passwordRef.current
        const {data: res} = await login({username, password})
        if (res.code === 10000) {
            sessionStorage.setItem("token", res.data.token)
            sessionStorage.setItem("username", username)
            message.success(res.msg)
            navigate('/main',{
                state:{
                    username
                }
            })
        }
    }
    const registerSubmit = async () => {
        const {value: username} = usernameRef.current
        const {value: password} = passwordRef.current
        const {value: repassword} = rePasswordRef.current
        if(repassword!==password){
            message.error('两次密码不一致！')
            return
        }
        const {data: res} = await register({username, password})
        if (res.code === 10000) {
            clenForm()
            message.success(res.msg)
            changeState()
        }
    }
    const changeState = ()=>{
        clenForm()
        setLoginFlag(flag => !flag)
    }
    const clenForm = ()=>{
        usernameRef.current.value = ''
        passwordRef.current.value = ''
        rePasswordRef.current.value = ''
    }
    return (
        <div className="dowebok">
            <div className="container-login100">
                <div className="wrap-login100">
                    <div className="login100-pic js-tilt" data-tilt>
                        <img src={img} alt="IMG"/>
                    </div>
                    <form className="login100-form validate-form">
				<span className="login100-form-title">
					{isLogin?'用户登录':'用户注册'}
				</span>
                        <div className="wrap-input100 validate-input">
                            <input ref={usernameRef} className="input100" type="text" name="email"
                                   placeholder="用户名或者邮箱"/>
                            <span className="focus-input100"></span>
                            <span className="symbol-input100">
						<i className="fa fa-envelope" aria-hidden="true"></i>
					</span>
                        </div>

                        <div className="wrap-input100 validate-input">
                            <input ref={passwordRef} className="input100" type="password" name="pass"
                                   placeholder="首次输入密码"/>
                            <span className="focus-input100"></span>
                            <span className="symbol-input100">
						<i className="fa fa-lock" aria-hidden="true"></i>
					</span>
                        </div>
                        <div className="wrap-input100 validate-input" style={{display:isLogin?'none':'block'}}>
                            <input ref={rePasswordRef} className="input100" type="password" name="pass"
                                   placeholder="再次输入密码"/>
                            <span className="focus-input100"></span>
                            <span className="symbol-input100">
						<i className="fa fa-lock" aria-hidden="true"></i>
					</span>
                        </div>
                        <div className="container-login100-form-btn">
                            <input type='button' className="login100-form-btn" onClick={isLogin?loginSubmit:registerSubmit} value={isLogin?'登录':'注册'}/>
                        </div>
                        <div className="text-center p-t-12" style={{display:isLogin?'block':'none'}}>
                            <Link className="txt2" to="/login">忘记密码？</Link>
                        </div>
                        <div className="text-center p-t-136">
                            <input type='button' onClick={changeState} value={isLogin?'还没有账号？立即注册':'返回登录页面'}/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}

export default Login;